<template>
  <div>
    <!--    <ul class="nav-ul">-->
    <!--      <li-->
    <!--        v-for="(item, idx) in navMenuList"-->
    <!--        :key="idx"-->
    <!--        :class="[-->
    <!--          index === idx ? 'btn-nav-bg item-nav active' : 'btn-nav-bg item-nav',-->
    <!--        ]"-->
    <!--        @click="goPage(item.url)"-->
    <!--      >-->
    <!--        {{ item.name }}-->
    <!--      </li>-->
    <!--    </ul>-->
  </div>
</template>

<script>
export default {
  name: "Navbar",
  data() {
    return {
      index: 0,
      navMenuList: [
        {
          url: "/earlyWarning",
          name: "主动预警",
        },

        // {
        //   url: "/dataSourceMaintain",
        //   name: "数据源维护",
        // },
        {
          url: "/pointMaintain",
          name: "测点维护",
        },
        {
          url: "/faultDiagnosis",
          name: "录波解析",
        },
        {
          url: "/historyState",
          name: "历史数据",
        },
      ],
    };
  },
  watch: {
    $route: {
      handler: function (newVal, oldVal) {
        const firstMenu = ["/earlyWarning"];
        const secondMenu = [
          "/earlyWarning",
          "/earlyWarning/add",
          "/dataSourceMaintain",
        ];
        const thirdMenu = [
          "/pointMaintain",
          "/pointMaintain/evaluate",
          "/pointMaintain/manage",
          "/pointMaintain/manage/managePage",
          "/pointMaintain/manage/sonModule",
        ];
        const fourMenu = ["/faultDiagnosis"];
        const fiveMenu = ["/historyState"];
        const sixMenu = ["/faultCase"];
        if (firstMenu.includes(newVal.path)) {
          this.index = 0;
        } else if (secondMenu.includes(newVal.path)) {
          this.index = 1;
        } else if (thirdMenu.includes(newVal.path)) {
          this.index = 1;
        } else if (fourMenu.includes(newVal.path)) {
          this.index = 2;
        } else if (fiveMenu.includes(newVal.path)) {
          this.index = 3;
        }
      },
      deep: true,
    },
  },
  methods: {
    goPage(url) {
      this.$router.push(url).catch((err) => err);
    },
  },
};
</script>

<style scoped lang="less">
.nav-ul {
  display: flex;
  padding-left: 53px;
  z-index: 9999;
  position: relative;

  li {
    cursor: pointer;
  }
}
</style>
